<script setup>
import Card from "../Card.vue"
import RowData from "./RowData.vue"

const props = defineProps({
  rowDatas: {
    type: Object,
    required: true,
  },
  otherInfos: {
    type: Object,
    required: true,
  },
})
</script>

<template>
  <Card style="padding: 25px">
    <div class="friend-links-header">
      <h3 class="friend-links-title">
        <i :class="props.otherInfos.icon"></i>{{ props.otherInfos.title }}
      </h3>
    </div>
    <div class="friend-links-container">
      <RowData v-for="(rowData, index) in props.rowDatas" :row-data="rowData" :key="index" />
    </div>
  </Card>
</template>

<style scoped>
.friend-links-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  align-items: center;
}

.friend-links-title {
  font-weight: 600;
  color: var(--primary);
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.friend-links-container {
  max-height: 300px;
  overflow-y: auto;
  padding-right: 10px;
}

.friend-links-container::-webkit-scrollbar {
  width: 6px;
}

.friend-links-container::-webkit-scrollbar-track {
  background: rgba(var(--bg-darker-rgb), 0.1);
  border-radius: 3px;
}

.friend-links-container::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 3px;
}
</style>
